import 'package:flutter/material.dart';
import '../../utils/g.dart';

import 'package:provider/provider.dart';
import '../../providers/page_provider.dart';

import '../../utils/layout/layout_responsive.dart';

class Dashboard extends StatefulWidget {
  Dashboard({Key? key}) : super(key: key);

  @override
  _DashboardState createState() => _DashboardState();
}

class _DashboardState extends State<Dashboard> {
  int _column_number = 4;
  double w = 0;

  final List<dynamic> _tiles = [
    Container(color: Colors.amberAccent),
    Container(color: Colors.redAccent),
    Container(color: Colors.blueGrey),
    Container(color: Colors.yellow),
    Container(color: Colors.purpleAccent),
    Container(color: Colors.lightGreenAccent),
    Container(color: Colors.lightGreen),
    Container(color: Colors.black54),
    Container(color: Colors.yellowAccent),
    Container(color: Colors.grey),
    Container(color: Colors.deepOrangeAccent),
    Container(color: Colors.deepPurple),
  ];

  @override
  void initState() { 
    super.initState();
    
  }

  void _getColumnNumber() {
    w = MediaQuery.of(context).size.width;
    if (w < LayoutResponsive.mdWidth) {
      _column_number = 2;
    } else if (w < LayoutResponsive.lgWidth) {
      _column_number = 3;
    } else {
      _column_number = 4;
    }
  }

  @override
  Widget build(BuildContext context) {
    _getColumnNumber();

    return Container(
      child: GridView.builder(
        padding: EdgeInsets.symmetric(horizontal: 40),
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: _column_number,
          mainAxisSpacing: 20,
          crossAxisSpacing: 20,
          childAspectRatio: 1.0
        ),
        itemCount: _tiles.length,
        itemBuilder: (context, index) {
          return _tiles[index];
        },
        physics: BouncingScrollPhysics(), // 反弹效果
        // physics: ClampingScrollPhysics(), // 夹住的效果
        // physics: AlwaysScrollableScrollPhysics(), // 滚动
        // physics: NeverScrollableScrollPhysics(), // 禁止滚动
      ),
    );
    
    // Container(
    //   color: Colors.green.shade100,
    //   width: w,
    //   height: 200,
    //   child: Wrap(
    //     direction: Axis.horizontal,
    //     children: [
          
    //       ClipRRect(
    //         borderRadius: BorderRadius.all(Radius.circular(10)),
    //         child: Container(
    //           width: w / _column_number,
    //           color: Colors.grey,
    //           // decoration: BoxDecoration(
    //           //   borderRadius: BorderRadius.all(Radius.circular(10.0)),
    //           // ),
    //           child: Text('1122222')
    //         ),
    //       ),
    //       ClipRRect(
    //         borderRadius: BorderRadius.all(Radius.circular(10)),
    //         child: Container(
    //           width: w / _column_number,
    //           color: Colors.grey,
    //           // decoration: BoxDecoration(
    //           //   borderRadius: BorderRadius.all(Radius.circular(10.0)),
    //           // ),
    //           child: Text('1122222')
    //         ),
    //       )
    //     ],
    //   )
    // );
  }
}